<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
</style>
<link rel="stylesheet" type="text/css" href="../../themes/icon.css"></link>
<script type="text/javascript" src="../../jquery-1.8.0.min.js"></script>
<link rel="stylesheet" media="screen" href="../../showLoading/css/showLoading.css" />
<script type="text/javascript" src="../../showLoading/js/jquery.showLoading.js"></script>
<script type="text/javascript" src="../../agileloader.js"></script>
</head>
<body>
	<div data-type="layout" data-define="fit:true,border:false">
		<div data-define="region:'north',border:false" style="height: 168px; padding: 2px" title="查询条件">
			<form id="ff" method="post">
				<table class="stable" cellpadding="1" cellspacing="1" style="width: 100%">
					<tr>
						<td width="15%" class="stdlabel">小图标式录入框</td>
						<td width="15%" class="stdinput"><input data-type="inputiconbox" name="testName2" data-define="iconClick:searcherTest,required:true"></input></td>
						<td width="15%" class="stdlabel">文本录入框</td>
						<td width="15%" class="stdinput"><input data-type="inputbox" type="text" name="name" data-define="required:true,validType:'email'"></input></td>
						<td width="15%" class="stdlabel">数字录入框</td>
						<td width="15%" class="stdinput"><input data-type="numberbox" type="text" name="email" data-define="required:true,tipPosition:'left'"></input></td>
					</tr>
					<tr>
						<td width="15%" class="stdlabel">浮点数</td>
						<td width="15%" class="stdinput"><input data-type="numberbox" type="text" name="name" data-define="precision:2,required:true"></input></td>
						<td width="15%" class="stdlabel">时间选择</td>
						<td width="15%" class="stdinput"><input data-type="timespinner" type="text" name="email" data-define="min:'08:30',max:'18:00',required:true"></input></td>
						<td width="15%" class="stdlabel">数字格式化</td>
						<td width="15%" class="stdinput"><input data-type="numberbox" value="1234567.89" data-define="precision:2,groupSeparator:',',decimalSeparator:'.',required:true,tipPosition:'left'"></input></td>
					</tr>
					<tr>
						<td class="stdlabel">下拉列表</td>
						<td class="stdinput"><select name="danxuan" data-type="combogrid"
							data-define="required:true,
								panelWidth: 500,idField: 'itemid',textField: 'productname',multiple: false,fitColumns: true,
								url: '../combogrid/grid_data1.json',
								columns: [[
									{field:'itemid',title:'Item ID',width:80},
									{field:'productname',title:'Product',width:120},
									{field:'listprice',title:'List Price',width:80,align:'right'},
									{field:'unitcost',title:'Unit Cost',width:80,align:'right'},
									{field:'attr1',title:'Attribute',width:200},
									{field:'status',title:'Status',width:60,align:'center'}
								]]
							">
						</select></td>
						<td class="stdlabel">下拉框</td>
						<td class="stdinput"><input data-type="combobox" name="zhengshu" data-define="required:true,panelWidth: 300,
							url:'../combobox/combobox_data1.json',
							valueField:'id',textField:'text',
							multiple:false,
							formatter: formatItem"></input></td>
						<td class="stdlabel">下拉树</td>
						<td class="stdinput"><input data-type="combotree" name="zhengshu" data-define="url:'../combotree/tree_data1.json',required:true,tipPosition:'left'"></input></td>
					</tr>
					<tr>
						<td class="stdlabel">日期</td>
						<td class="stdinput"><input data-type="datebox" name="zhengshu" data-define="panelWidth: 200,required:true"></input></td>
						<td class="stdlabel" title="日期（带小时分秒）">日期...</td>
						<td class="stdinput"><input data-type="datetimebox" name="zhengshu" data-define="panelWidth: 200,required:true"></input></td>
						<td class="stdlabel">数字选择</td>
						<td class="stdinput"><input data-type="numberspinner" type="text" name="email" data-define="min:10,max:100,increment:10,required:true,tipPosition:'left'"></input></td>
					</tr>
					<tr>
						<td colspan="4"></td>
						<td colspan="2"><div style="margin: 0px 0;" align="right">
									<a href="javascript:void(0)" data-type="linkbutton" data-define="iconCls:'icon-reload'">清空</a>
									<a href="javascript:void(0)" data-type="linkbutton" data-define="iconCls:'icon-search'">查询</a>
							</div></td>
					</tr>
				</table>
			</form>
		</div>
		<div data-define="region:'center',border:false" title="">
			<div data-type="tabs" style="height: auto;" data-define="fit:true,border:false">
				<div title="XXX信息列表1" style="padding: 0px">
					<table id="tg1" data-type="gridtree" title="" style="height: auto"
						data-define="
				iconCls: 'icon-ok',
				rownumbers: true,
				animate: true,
				collapsible: true,
				fitColumns: true,
				url: '../gridtree/gridtree_data2.json',
				idField: 'id',
				treeField: 'name',toolbar: '#tb1',
				showFooter: true
			">
						<thead>
							<tr>
								<th data-define="field:'name',width:180,editor:'text'">Task Name</th>
								<th data-define="field:'persons',width:60,align:'right',editor:'numberbox'">Persons</th>
								<th data-define="field:'begin',width:80,editor:'datebox'">Begin Date</th>
								<th data-define="field:'end',width:80,editor:'datebox'">End Date</th>
								<th data-define="field:'progress',width:120,formatter:formatProgress,editor:'numberbox'">Progress</th>
							</tr>
						</thead>
					</table>
					<div id="tb1" style="height: auto">
						<a href="javascript:void(0)" data-type="linkbutton" data-define="iconCls:'icon-add',plain:true" onclick="add1()">新增</a> <a href="javascript:void(0)" data-type="linkbutton" data-define="iconCls:'icon-edit',plain:true" onclick="edit1()">编辑</a> <a href="javascript:void(0)"
							data-type="linkbutton" data-define="iconCls:'icon-cancel',plain:true" onclick="remove1()">删除</a> <a href="javascript:void(0)" data-type="linkbutton" data-define="iconCls:'icon-search',plain:true" onclick="search1()">搜索</a>
					</div>
					<div style="padding-top: 3px; margin: 0px 0" align="right">
							<a href="javascript:void(0)" data-type="linkbutton" data-define="iconCls:'icon-ok'">确定</a>
							<a href="javascript:void(0)" data-type="linkbutton" data-define="iconCls:'icon-cancel'">关闭</a>
					</div>
				</div>
				<div title="XXX信息列表2" style="padding: 0px">
					<table id="dg2" data-type="grid" title="" style="height: auto"
						data-define="fit:true,
							iconCls: 'icon-edit',
							rownumbers:true,singleSelect:false,pageSize:12,pagination:true,
							toolbar: '#tb2',
							fitColumns:true,
							url: '../grid/grid_data1.json'
						">
						<thead>
							<tr>
								<th data-define="field:'ck',checkbox:true"></th>
								<th data-define="field:'itemid',width:80">Item ID</th>
								<th data-define="field:'productid',width:100">Product</th>
								<th data-define="field:'listprice',width:120,align:'right'">List Price</th>
								<th data-define="field:'unitcost',width:180,align:'right'">Unit Cost</th>
								<th data-define="field:'attr1',width:250,editor:'text'">Attribute</th>
								<th data-define="field:'status',width:160,align:'center'">Status</th>
							</tr>
						</thead>
					</table>
					<div id="tb2" style="height: auto">
						<a href="javascript:void(0)" data-type="linkbutton" data-define="iconCls:'icon-add',plain:true" onclick="add1()">新增</a> <a href="javascript:void(0)" data-type="linkbutton" data-define="iconCls:'icon-edit',plain:true" onclick="edit1()">编辑</a> <a href="javascript:void(0)"
							data-type="linkbutton" data-define="iconCls:'icon-cancel',plain:true" onclick="remove1()">删除</a> <a href="javascript:void(0)" data-type="linkbutton" data-define="iconCls:'icon-search',plain:true" onclick="search1()">搜索</a>
					</div>
				</div>
				<div title="XXX信息列表3" style="padding: 0px">
					<table id="testEdit" data-type="grid" title="" style="height: auto" data-define="fit:true,
				iconCls: 'icon-edit',
				singleSelect: true,
				toolbar: '#tb3',
				url: '../grid/grid_data1.json',fitColumns:true,
				onClickRow: onClickRow
			">
						<thead>
							<tr>
								<th data-define="field:'itemid',width:80">Item ID</th>
								<th
									data-define="field:'productid',width:100,
						formatter:function(value,row){
							return row.productname;
						},
						editor:{
							type:'combobox',
							options:{
								valueField:'productid',
								textField:'productname',
								url:'../grid/products.json',
								required:true
							}
						}">Product</th>
								<th data-define="field:'listprice',width:180,align:'right',editor:{type:'numberbox',options:{precision:1}}">List Price</th>
								<th data-define="field:'unitcost',width:230,align:'right',editor:'numberbox'">Unit Cost</th>
								<th data-define="field:'attr1',width:230,editor:'text'">Attribute</th>
								<th data-define="field:'status',width:260,align:'center',editor:{type:'checkbox',options:{on:'P',off:''}}">Status</th>
							</tr>
						</thead>
					</table>
				</div>
				<div title="XXX信息列表4" style="padding: 0px">
					<table id="dg4" data-type="grid" title="" style="height: auto"
						data-define="fit:true,
							iconCls: 'icon-edit',
							rownumbers:true,singleSelect:true,pageSize:12,pagination:true,
							toolbar: '#tb4',
							fitColumns:true,
							url: '../grid/grid_data1.json'
						">
						<thead>
							<tr>
								<th data-define="field:'itemid',width:80">Item ID</th>
								<th data-define="field:'productid',width:100">Product</th>
								<th data-define="field:'listprice',width:120,align:'right'">List Price</th>
								<th data-define="field:'unitcost',width:180,align:'right'">Unit Cost</th>
								<th data-define="field:'attr1',width:250,editor:'text'">Attribute</th>
								<th data-define="field:'status',width:160,align:'center'">Status</th>
							</tr>
						</thead>
					</table>
					<div id="tb4" style="height: auto">
						<a href="javascript:void(0)" data-type="linkbutton" data-define="iconCls:'icon-add',plain:true" onclick="add1()">新增</a> <a href="javascript:void(0)" data-type="linkbutton" data-define="iconCls:'icon-edit',plain:true" onclick="edit1()">编辑</a> <a href="javascript:void(0)"
							data-type="linkbutton" data-define="iconCls:'icon-cancel',plain:true" onclick="remove1()">删除</a> <a href="javascript:void(0)" data-type="linkbutton" data-define="iconCls:'icon-search',plain:true" onclick="search1()">搜索</a>
					</div>
				</div>
				<div title="XXX信息详细" style="padding: 2px">
					<table class="stable" cellpadding="1" cellspacing="1" style="width: 100%">
						<tr>
							<td width="15%" class="stdlabel">小图标式录入框2</td>
							<td width="15%" class="stdinput"><input data-type="inputiconbox" name="testName3" data-define="iconClick:searcherTest,panelWidth: 200,required:true"></input></td>
							<td width="15%" class="stdlabel">文本录入框</td>
							<td width="15%" class="stdinput"><input data-type="inputbox" type="text" name="name" data-define="required:true,validType:'email'"></input></td>
							<td width="15%" class="stdlabel">文本录入框</td>
							<td width="15%" class="stdinput"><input data-type="inputbox" type="text" name="name" data-define="required:true,validType:'email',tipPosition:'left'"></input></td>
						</tr>
						<tr>
							<td width="15%" class="stdlabel">文本录入框</td>
							<td width="15%" class="stdinput"><input data-type="inputbox" type="text" name="name" data-define="required:true,validType:'email'"></input></td>
							<td width="15%" class="stdlabel">数字录入框</td>
							<td width="15%" class="stdinput"><input data-type="numberbox" type="text" name="email" data-define="required:true"></input></td>
							<td width="15%" class="stdlabel">非负整数</td>
							<td width="15%" class="stdinput"><input data-type="numberbox" type="text" name="subject" data-define="min:0,max:999999,required:true,tipPosition:'left'"></input></td>
						</tr>
						<tr>
							<td width="15%" class="stdlabel">浮点数</td>
							<td width="15%" class="stdinput"><input data-type="numberbox" type="text" name="name" data-define="precision:2,required:true"></input></td>
							<td width="15%" class="stdlabel">时间选择</td>
							<td width="15%" class="stdinput"><input data-type="timespinner" type="text" name="email" data-define="min:'08:30',max:'18:00',required:true"></input></td>
							<td width="15%" class="stdlabel">数字格式化</td>
							<td width="15%" class="stdinput"><input data-type="numberbox" value="1234567.89" data-define="precision:2,groupSeparator:',',decimalSeparator:'.',required:true,tipPosition:'left'"></input></td>
						</tr>
						<tr>
							<td class="stdlabel">下拉列表</td>
							<td class="stdinput"><select name="danxuan" data-type="combogrid"
								data-define="required:true,
										panelWidth: 500,idField: 'itemid',textField: 'productname',multiple: false,fitColumns: true,
										url: '../combogrid/grid_data1.json',
										columns: [[
											{field:'itemid',title:'Item ID',width:80},
											{field:'productname',title:'Product',width:120},
											{field:'listprice',title:'List Price',width:80,align:'right'},
											{field:'unitcost',title:'Unit Cost',width:80,align:'right'},
											{field:'attr1',title:'Attribute',width:200},
											{field:'status',title:'Status',width:60,align:'center'}
										]]
									">
							</select></td>
							<td class="stdlabel">下拉框</td>
							<td class="stdinput"><input data-type="combobox" name="zhengshu" data-define="required:true,panelWidth: 300,
									url:'../combobox/combobox_data1.json',
									valueField:'id',textField:'text',
									multiple:false,
									formatter: formatItem"></input></td>
							<td class="stdlabel">下拉树</td>
							<td class="stdinput"><input data-type="combotree" name="zhengshu" data-define="url:'../combotree/tree_data1.json',required:true,tipPosition:'left'"></input></td>
						</tr>
						<tr>
							<td class="stdlabel">日期</td>
							<td class="stdinput"><input data-type="datebox" name="zhengshu" data-define="panelWidth: 200,required:true"></input></td>
							<td class="stdlabel" title="日期（带小时分秒）">日期...</td>
							<td class="stdinput"><input data-type="datetimebox" name="zhengshu" data-define="panelWidth: 200,required:true"></input></td>
							<td class="stdlabel">数字选择</td>
							<td class="stdinput"><input data-type="numberspinner" type="text" name="email" data-define="min:10,max:100,increment:10,required:true,tipPosition:'left'"></input></td>
						</tr>
					</table>
					<table width="100%">
						<tr>
							<td width="50%"><div style="float: left"></div></td>
							<td width="50%"><div style="margin: 0 0;" align="right">
										<a href="javascript:void(0)" data-type="linkbutton" data-define="iconCls:'icon-cancel'">删除</a>
										<a href="javascript:void(0)" data-type="linkbutton" data-define="iconCls:'icon-save'">保存</a>
										<a href="javascript:void(0)" data-type="linkbutton" data-define="iconCls:'icon-reload'">清空</a>
								</div></td>
						</tr>
					</table>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		using("combobox");
        using("numberbox");
        using("grid");
        function formatItem(row) {
        	var s = '<span style="font-weight:bold">' + row.text + '</span><br/>' + '<span>' + row.desc + '</span>';
			return s;
        }
        function add1() {
	        alert("add");
        }
        function edit1() {
	        alert("edit");
        }
        function remove1() {
	        alert("remove");
        }
        function search1() {
	        alert("search");
        }
        function formatProgress(value) {
	        if (value) {
		        var s = '<div style="width:100%;border:1px solid #ccc">' + '<div style="width:' + value
		                + '%;background:#cc0000;color:#fff">' + value + '%' + '</div>'
		        '</div>';
		        return s;
	        } else {
		        return '';
	        }
        }
		var editIndex = undefined;
        function endEditing() {
	        if (editIndex == undefined) {
		        return true
	        }
	        if ($('#testEdit').grid('validateRow', editIndex)) {
		        var ed = $('#testEdit').grid('getEditor', { index : editIndex, field : 'productid' });
		        var productname = $(ed.target).combobox('getText');
		        $('#testEdit').grid('getRows')[editIndex]['productname'] = productname;
		        $('#testEdit').grid('endEdit', editIndex);
		        editIndex = undefined;
		        return true;
	        } else {
		        return false;
	        }
        }
        function onClickRow(index) {
	        if (editIndex != index) {
		        if (endEditing()) {
			        $('#testEdit').grid('selectRow', index).grid('beginEdit', index);
			        editIndex = index;
		        } else {
			        $('#testEdit').grid('selectRow', editIndex);
		        }
	        }
        }
        function append() {
	        if (endEditing()) {
		        $('#testEdit').grid('appendRow', { status : 'P' });
		        editIndex = $('#testEdit').grid('getRows').length - 1;
		        $('#testEdit').grid('selectRow', editIndex).grid('beginEdit', editIndex);
	        }
        }
        function remove() {
	        if (editIndex == undefined) {
		        return
	        }
	        $('#testEdit').grid('cancelEdit', editIndex).grid('deleteRow', editIndex);
	        editIndex = undefined;
        }
        function accept() {
	        if (endEditing()) {
		        $('#testEdit').grid('acceptChanges');
	        }
        }
        function reject() {
	        $('#testEdit').grid('rejectChanges');
	        editIndex = undefined;
        }
        function getChanges() {
	        var rows = $('#testEdit').grid('getChanges');
	        alert(rows.length + ' rows are changed!');
        }
        function searcherTest(obj) {
	        alert(obj + "-----");
        }
	</script>
</body>
</html>
